<template>
  <div>
    {{ name }}<br />
    <button @click="$emit('change', '王五')">change name</button>
    <!-- <button @click="changeList">change list element</button> -->
    <table border="1px">
      <tr>
        <th>姓名</th>
        <th>日期</th>
        <th>地址</th>
        <th>标签</th>
      </tr>
      <tr v-for="item in data" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.date }}</td>
        <td>{{ item.address }}</td>
        <td>
          <!-- 占位(等着将来被替换)、传值 -->
          <slot name="icon" v-bind:row="item">{{ item.tag }}</slot>

          <!-- <slot name="icon1" v-bind:row="item">{{ item.tag }}</slot>
          <slot name="icon2" v-bind:row="item">{{ item.tag }}</slot>
          <slot name="icon3" v-bind:row="item">{{ item.tag }}</slot> -->
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  // 这种写法，无法控制传递过来的值的类型
  // props: ['name', 'data']
  // 这种写法，就可以更加精细化的控制我们类型之类的
  props: {
    name: String, // 类型要大写
    data: Array // 类型是数组
  },
  methods: {
    changeList () {
      // 覆盖
      // this.data = [{ id: 1005, name: '尹志平', address: '全真教' }]
      // 更改元素
      this.data[3].name = '尹志平'
      this.data[3].date = 1033
      this.data[3].address = '河南终南山'
      this.data[3].tag = '公司'
    }
  }
}
</script>
